import Taro from '@tarojs/taro'
import { Component } from 'react'
import { CoverView, CoverImage } from '@tarojs/components'
import Add from '../assets/add.png'
import HomePng from '../assets/home.png'
import HomeActivePng from '../assets/home-active.png'
import UserPng from '../assets/user.png'
import UserActivePng from '../assets/user-active.png'
import './index.less'

class customTabBar extends Component {

  state = {
    selected: 0,
    color: '#000000',
    selectedColor: '#F6743D',
    backgroundColor: "#000",
    list: [
      {
        pagePath: '/pages/index/index',
        iconPath: HomePng,
        selectedIconPath: HomeActivePng,
        text: '首页'
      },
      {
        pagePath: '/pages/blog/blog',
        iconPath: UserPng,
        selectedIconPath: UserActivePng,
        text: '我的'
      }
    ],
    num: 9
  }

  switchTab = (item) => {
    const url = item.pagePath
    console.log('url', url)
    Taro.switchTab({
      url
    })
  }

  jumpIntellect = () => {
    Taro.navigateTo({ url: '/pages/intellect/intellect' })
  }

  componentDidMount() {
    this.setState({
      selected: this.props.ind
    })
  }

  // 自定义 tabBar的页面
  render() {
    return (
      <CoverView className='tab-bar'>
        <CoverView className='tab-bar-wrap'>
          {
            this.state.list.map((item, index) => {
              return <CoverView className='tab-bar-wrap-item'
                onClick={this.switchTab.bind(this, item)}
                data-path={item.pagePath}
                key={item.text}
              >
                <CoverImage className='tab-bar-wrap-item-icon' src={this.state.selected === index ? item.selectedIconPath : item.iconPath} />
                <CoverView className='tab-bar-wrap-item-btn'
                  style={{ color: this.state.selected === index ? this.state.selectedColor : this.state.color }}
                >{item.text}
                </CoverView>
              </CoverView>
            })
          }
        </CoverView>
        <CoverImage className='intellect-icon' src={Add} onClick={this.jumpIntellect} />
      </CoverView>
    )
  }
}
export default customTabBar